<template>
  <div class="optionsContainter">
    <!-- 员工选择框组件 -->
    <el-select
      v-model="value"
      placeholder="请选择"
      popper-class="optionsContent"
      filterable
      @change="showMessage($event)"
      style="width:100%;"
      clearable
    >
      <el-option
        v-for="item in users"
        :key="item.userId"
        :label="item.userName"
        :value="[item.userId,item.deptId,item.compId,item.userName]"
      >
        <span style="float: left">{{ item.userName }}</span>
        <span style="float: left">{{ item.userId }}</span>
        <el-tooltip class="item" effect="dark" :content="item.deptName" placement="bottom" :disabled="getLength(item.deptName) > 14 ? false : true">
          <span style="float: left">{{ item.deptName }}</span>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="item.compName" placement="right" :disabled="getLength(item.compName) > 14 ? false : true">
          <span style="float: left">{{ item.compName }}</span>
        </el-tooltip>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'userSel',
  // 父组件传值子组件
  props: {
    sel: {
      type: String
    },
    // 用户数据
    users: {
      type: Array
    },
    pmp: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      // 超出长度省略
      disabled: true,
      // 是否禁用
      isValue: false,
      // 显示数据集合
      options: [],
      // 选择默认值
      value: ''
    };
  },
  mounted () {
    // 保留数据源
    this.copy = Object.assign(this.options);
  },
  // 监听
  watch: {
    // 是否允许选择
    sel: {
      immediate: true,
      handler (val, oldVal) {
        if (val !== '') {
          this.value = val;
          // this.isValue = true;
        } else {
          this.value = '';
          // this.isValue = false;
        }
      }
    }
  },
  created () {
    // 判断是否初始值
    this.isPMP();
  },
  methods: {
    isPMP () {
      if (this.pmp.length > 0) {
        this.value = this.pmp[0];
      }
    },
    // 传递父组件参数 所选员工信息
    showMessage (e) {
      this.$emit('seluser', e);
    },
    // 获得输入框中字符长度
    getLength (val) {
      let str = val;
      let bytesCount = 0;
      for (let i = 0, n = str.length; i < n; i++) {
        let c = str.charCodeAt(i);
        if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
          bytesCount += 1;
        } else {
          bytesCount += 2;
        }
      }
      return bytesCount;
    }
  }
};
</script>

<style lang="scss">
@import './index.scss';
</style>
